<template>
  <!-- workLogInput -->
  <div class="flex-box" style="justify-content: space-between;">
    <div style="width: 73%;">
      <div class="wrap g-card" style="margin-bottom: 20px">
        <div class="title-header">日志录入
          <div style="display: inline-block;float: right;">
            <el-button type="primary" @click="search">查询
            </el-button>
            <el-button type="info" plain @click="resetQuery">重置
            </el-button>
          </div>
        </div>

        <el-form :model="queryParams">
          <el-row>
            <el-col :span="8">
              <el-form-item prop="aaaa" label="">
                <el-select v-model="queryParams.aaaa" clearable filterable placeholder="工作类型" style="width: 100%;">
                  <el-option v-for="item in aaaaList" :key="item.value" :value="item.value" :label="item.label" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="bbbb" label="">
                <el-date-picker v-model="queryParams.date1" style="width: 100%;"
                  @change="(val) => dateChange(val, { fileBytes: ['acptBgnDate', 'acptEndDate'] }, 'queryParams')"
                  :editable="false" type="daterange" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                  start-placeholder="开始日期" end-placeholder="结束日期" size="small" class="item-width">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="cccc" label="">
                <el-select v-model="queryParams.cccc" clearable filterable placeholder="工作状态" style="width: 100%;">
                  <el-option v-for="item in ccccList" :key="item.value" :value="item.value" :label="item.label" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <Card style="margin-top: 20px;">
        <el-button @click="dialogVisible = true, isAdd = true" type="primary" icon="el-icon-plus">填写日志</el-button>
        <el-table v-loading="loading" :data="tableList" class="ma-top" style="width: 100%;">
          <el-table-column label="日志类型" align="center" prop="aaaa" fixed="left" />
          <el-table-column label="汇报日期" align="center" prop="bbbb" width="100" />
          <el-table-column label="服务完成率" align="center" prop="cccc" width="110" />
          <el-table-column label="预估收费成功件数" align="center" prop="dddd" width="130" />
          <el-table-column label="预估不可回收/困难件数" align="center" prop="eeee" width="170" />
          <el-table-column label="预估不确定件数" align="center" prop="ffff" width="130" />
          <el-table-column label="工作类型" align="center" prop="gggg" width="150" />
          <el-table-column label="更新时间" align="center" prop="hhhh" width="150" />
          <el-table-column label="状态" align="center" prop="iiii" fixed="right" width="100" />
          <el-table-column label="操作" align="center" fixed="right" width="100">
            <template slot-scope="scope">
              <el-button size="mini" type="text" @click="uploadExcel(scope.row)">撤销</el-button>
              <!-- handleDelete(scope.row) -->
              <el-button size="mini" type="text"
                @click="dialogVisible = true, isAdd = false, showInput = false">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
          @pagination="getList" />
      </Card>
    </div>
    <div style="width: 25%;">
      <div class="wrap g-card" style="margin-bottom: 20px;position: relative;">
        <div class="title-header">日志看板
        </div>

        <div class="flex-box" style="justify-content: space-between;position: relative;">
          <div style="width: 50%;">
            <div id="logInput"></div>
            <div style="text-align: center;padding-top: 10px;">星级点评</div>
          </div>

          <div class="flex-box"
            style="width: 50%;text-align: center;flex-direction: column;justify-content: space-around;">
            <div class="left-dis-box">
              <span>8.5%</span>
              <div>低点评率</div>
            </div>
            <div class="left-dis-box">
              <span style="color: #FCA21D;">1.5%</span>
              <div>缺失率</div>
            </div>
          </div>

        </div>
      </div>
      <div class="wrap g-card">
        <div class="title-header"><span>日志日历</span>
          <div class="flex-box" style="float: right;font-size: 14px;align-items: center;">
            <div class="flex-box tip-box">
              <div class="no-input-line"></div>
              <span>缺报</span>
            </div>
            <div class="flex-box tip-box" style="margin: 0 15px;">
              <div class="cir-point"></div>
              <span>低星</span>
            </div>
            <div class="flex-box tip-box">
              <div class="cir-point" style="background: #F02828;"></div>
              <span>未读</span>
            </div>
          </div>
        </div>
        <el-calendar class="calender-cla">
          <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
          <template slot="dateCell" slot-scope="{date, data}">
            <!--  -->
            <div :class="[data.isSelected ? 'is-selected' : '', 'day-item', noInput(date, data) ? 'bor-no-input' : '']">
              <span>{{ data.day.split('-').slice(1)[1] }}</span>
              <div class="point-box">
                <div v-if="lowX(date, data)" class="cir-point"></div>
                <div v-if="noReade(date, data)" class="cir-point" style="background: #F02828;margin-left:5px;"></div>
              </div>
            </div>
          </template>
        </el-calendar>
      </div>
    </div>

    <el-dialog :visible.sync="dialogVisible" title="填写日志" width="35%" append-to-body destroy-on-close
      :close-on-click-modal="false">

      <el-radio-group v-model="form.aaaa">
        <el-radio label="1">日报</el-radio>
        <el-radio label="2">周报</el-radio>
      </el-radio-group>

      <div class="flex-box" style="justify-content: space-between;margin-top:10px;align-items: center;">
        <span v-if="form.aaaa == 1" class="font-blod">2023年1月23日</span>
        <span v-else class="font-blod">2023年1月23日-2023年1月30</span>
        <el-button type="text" @click="">查看工作记录</el-button>
      </div>
      <el-divider class="divider-self"></el-divider>

      <h5 style="margin: 10px 0;">工作核查情况</h5>
      <el-descriptions size="mini" :column="4">
        <el-descriptions-item label="计划次数">400</el-descriptions-item>
        <el-descriptions-item label="实际服务">380</el-descriptions-item>
        <el-descriptions-item label="服务率">95%</el-descriptions-item>
        <el-descriptions-item label="收费件数">10</el-descriptions-item>
        <el-descriptions-item label="服务客户">50</el-descriptions-item>
        <el-descriptions-item label="服务保单">78</el-descriptions-item>
        <el-descriptions-item label="面访次数">80</el-descriptions-item>
        <el-descriptions-item label="电访次数">200</el-descriptions-item>
        <el-descriptions-item label="服务客户">50</el-descriptions-item>
        <el-descriptions-item label="服务保单">78</el-descriptions-item>
        <el-descriptions-item label="面访次数">80</el-descriptions-item>
        <el-descriptions-item label="电访次数">200</el-descriptions-item>
        <el-descriptions-item label="网联次数">100</el-descriptions-item>
        <el-descriptions-item label="跟进记录">30</el-descriptions-item>
        <el-descriptions-item label="商机识别">2</el-descriptions-item>
      </el-descriptions>

      <h5 style="margin: 10px 0;">收费情况预估</h5>
      <el-descriptions size="mini" :column="4">
        <el-descriptions-item label="可回收">400</el-descriptions-item>
        <el-descriptions-item label="困难件">380</el-descriptions-item>
        <el-descriptions-item label="不可回收">95%</el-descriptions-item>
        <el-descriptions-item label="不确定">10</el-descriptions-item>
      </el-descriptions>

      <el-form v-if="isAdd" :model="form" label-width="70px">
        <el-row>
          <el-form-item prop="bbbb" label="补充说明">
            <el-input v-model="form.bbbb" type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" placeholder="请输入" />
          </el-form-item>
        </el-row>
        <el-divider class="divider-self"></el-divider>

        <div v-for="(item, index) in form.workList" :key="index">
          <el-row>
            <el-form-item :prop="`workList.${index}.aaaa`" label="工作类型">
              <el-select v-model="item.aaaa" clearable filterable placeholder="请选择" style="width: 50%;">
                <el-option v-for="item in aaaaList" :key="item.value" :value="item.value" :label="item.label" />
              </el-select>
              <el-button type="danger" plain @click="form.workList.splice(index, 1)"
                style="float: right;margin-right: -10px;">删除</el-button>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item :prop="`workList.${index}.bbbb`" label="工作时间">
              <el-date-picker v-model="form.bbbb" type="date" placeholder="请选择" :editable="false"
                value-format="yyyy-MM-dd" format="yyyy-MM-dd" clearable style="width: 50%;">
              </el-date-picker>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item :prop="`workList.${index}.cccc`" label="工作地点">
              <el-input v-model="item.cccc" placeholder="请输入" clearable style="width: 50%;" />
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item :prop="`workList.${index}.dddd`" label="工作内容">
              <el-input v-model="form.dddd" type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" placeholder="请输入" />
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item :prop="`workList.${index}.eeee`" label="附件">
              <Uploadv multiple ref="upload1" type="drag" :format="['pdf', 'mp4', 'xls', 'xlsx', 'png', 'jpg']"
                :on-format-error="handleFormatError1" :before-upload="handleUpload1" :show-upload-list="false"
                :on-success="uploadSuccess1"
                :on-error="(response, file, fileList) => uploadFail1(response, file, fileList, item)"
                :headers="{ Authorization: tocken }" name="multipartFile" :action="action" style="width:392px;">
                <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                <p>点击或将文件拖拽到这里上传</p>
                <p style="color:rgba(0,0,0,0.43)">支持扩展名：.pdf .mp4.xls.xlsx.jpg</p>
              </Uploadv>
              <div>
                <div v-for="(item, index) in file1" :key="index">
                  <Icon type="md-attach" style="transform:rotate(90deg);" />
                  &nbsp;{{ item.name }}
                  <span @click="delectFile1(item.keyID)" class="deleteFile">X</span>
                </div>
              </div>

            </el-form-item>
          </el-row>
        </div>
        <div style="margin-top: 10px;text-align: right;">
          <el-button type="info" plain @click="form.workList.push({ fileList: [] })">新增</el-button>
        </div>
      </el-form>
      <div v-else>
        <el-divider class="divider-self"></el-divider>

        <h5 style="margin: 10px 0;">宣导计划</h5>
        <el-descriptions size="mini" :column="1">
          <el-descriptions-item label="工作时间">16:03</el-descriptions-item>
          <el-descriptions-item label="工作内容">续收服务宣导</el-descriptions-item>
          <el-descriptions-item label="附件">无</el-descriptions-item>
        </el-descriptions>
        <el-divider class="divider-self"></el-divider>

        <h5 style="margin: 10px 0;">评价</h5>
        <div class="rate-box">
          <div class="flex-box" style="justify-content: space-between;">
            <div class="flex-box" style="color: #B5B5B5;"><span>张主管</span>
              <el-rate v-model="rateVal" style="margin-left: 10px;margin-bottom: 10px;"></el-rate>
            </div>
            <div> <span style="color: #B5B5B5;margin-right: 20px;">2023-01-01 10:00:00</span>
              <i @click="showInput = true" class="el-icon-chat-dot-square" style="color:#DB3838;"></i>
            </div>
          </div>
          <p>续期服务应该提前，不要总是等到宽末。</p>
        </div>

        <el-input v-if="showInput" v-model="input2" placeholder="请输入内容" style="margin-top: 20px;">
          <template slot="append">
            <el-button type="primary" @click="dialogVisible = false">提交</el-button>
          </template>
        </el-input>
      </div>

      <span v-if="isAdd" slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
const echarts = require("echarts");
export default {
  name: 'WorkLogInput',
  data() {
    return {
      rateVal: 4,
      input2: '',
      total: 3,
      queryParams: {},
      aaaaList: [{ label: '服务计划', value: '1' },
      { label: '宣导计划', value: '2' },
      { label: '业务操作', value: '3' },
      { label: '其他', value: '4' }],
      ccccList: [{ label: '待点评', value: '1' }, { label: '已点评', value: '2' },],
      file1: [],
      tableList: [{
        aaaa: '日报', bbbb: '2023-01-01', cccc: '92.38%',
        dddd: '28件', eeee: '3件', ffff: '1件',
        gggg: '服务计划、宣导计划', hhhh: '2023-01-01 10:00:00', iiii: '待点评',
      }, {
        aaaa: '日报', bbbb: '2023-01-01', cccc: '92.38%',
        dddd: '28件', eeee: '3件', ffff: '1件',
        gggg: '服务计划、宣导计划', hhhh: '2023-01-01 10:00:00', iiii: '待点评',
      }, {
        aaaa: '日报', bbbb: '2023-01-01', cccc: '92.38%',
        dddd: '28件', eeee: '3件', ffff: '1件',
        gggg: '服务计划、宣导计划', hhhh: '2023-01-01 10:00:00', iiii: '待点评',
      }, {
        aaaa: '日报', bbbb: '2023-01-01', cccc: '92.38%',
        dddd: '28件', eeee: '3件', ffff: '1件',
        gggg: '服务计划、宣导计划', hhhh: '2023-01-01 10:00:00', iiii: '待点评',
      },],
      loading: false,
      showInput: false,
      isAdd: false,
      dialogVisible: false,
      myChart: null,
      option: {
        // title: {
        //   text: 'Referer of a Website',
        //   subtext: 'Fake Data',
        //   left: 'center'
        // },
        // legend: {
        //   orient: 'vertical',
        //   left: 'left'
        // },
        tooltip: {
          trigger: 'item',
          show: false,
          textStyle: {
            fontSize: 8
          }
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            height: 170,
            top: -30,
            right: 0,
            radius: '70%',
            label: {
              show: false,
            },
            data: [
              { value: 1048, name: 'Search Engine' },
              { value: 735, name: 'Direct' },
              { value: 580, name: 'Email' },
              { value: 484, name: 'Union Ads' },
              { value: 300, name: 'Video Ads' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      },
      form: {
        aaaa: '1',
        workList: [],
      },
      action: '',
      tocken: '',
    }
  },
  mounted() {
    this.action = "/scrm-gateway/scrm-uer/api/fileupload/up";
    this.tocken = sessionStorage.getItem("credentials");
    let chartDom = document.getElementById('logInput');
    this.myChart = echarts.init(chartDom);
    setTimeout(() => {
      this.myChart.setOption(this.option);
      this.myChart.resize()
    }, 50);
  },
  methods: {
    search() { },
    resetQuery() { },
    getList() { },
    handleDelete() { },
    /**文件上传 */
    handleFormatError1() {
      this.info("只能上传pdf、mp4、xls、xlsx、jpg、png格式的文件！");
    },
    // 保存需要上传的文件
    handleUpload1(file) {
      let hz = file.name.split(".");
      let extra = hz[hz.length - 1]
      if (extra == "pdf" || extra == "mp4" || extra == "xls" || extra == "xlsx" || extra == "jpg" || extra == "png") {
        let keyID = Math.random()
          .toString()
          .substr(2);
        // 16位前端标志id
        file["keyID"] = keyID;
        this.file1.push(file);
        // console.log(this.file1, "成功")
        return false;
      }
    },
    // 删除文件
    delectFile1(keyID) {
      this.file1 = this.file1.filter(item => {
        if (item.keyID == keyID) {
          // 保存到删除文件数组
          if (item.id) {
            this.deleteFiles1.push(item);
          }
        }
        return item.keyID != keyID;
      });
    },

    // 上传文件
    upload1() {
      console.log(this.file1, "日志制定上传文件");
      if (this.file1.length > 0) {
        for (let i = 0; i < this.file1.length; i++) {
          let item = this.file1[i];
          // 重新提交原文件不上传
          if (item.id) {
            this.fileIndex1++;
            // 如果全部是原文件
            if (this.fileIndex1 == this.file1.length) {
              this.draftLoading1 = false;
              this.modal1 = false;
              this.file1 = [];
              this.$refs.draftForm.resetFields();
              this.info("工作日志制定提交成功！");
            }
          } else {
            this.$refs.upload1.post(item);
          }
        }
      } else {
        this.draftLoading1 = false;
        this.$refs.draftForm.resetFields();
        this.file1 = [];
        this.info("工作日志制定提交成功！");
      }
    },

    // 文件上传成功
    uploadSuccess1(response, file, fileList) {
      this.fileIndex1++;
      this.$Message.info(response.data[0].name + "上传成功");
      if (this.fileIndex1 == this.file1.length) {
        this.draftLoading1 = false;
        this.modal1 = false;
        this.file1 = [];
        this.$refs.draftForm.resetFields();
        // this.info("工作日志制定提交成功!");
      }
      return true;
    },

    // 文件上传失败
    uploadFail1(response, file, fileList, item) {
      // console.log(response, file, fileList);
      this.fileIndex1++;
      this.info(fileList.name + "上传失败");
      if (this.fileIndex1 == this.file1.length) {
        this.draftLoading1 = false;
        this.file1 = [];
        // this.info("工作日志制定提交失败！");
      }
      return false;
    },
    lowX(date, data) {
      return ['07', '11'].includes(data.day.split('-').slice(1)[1])
    },
    noReade(date, data) {
      return ['07', '14'].includes(data.day.split('-').slice(1)[1])
    },
    noInput(date, data) {
      return ['14'].includes(data.day.split('-').slice(1)[1])
    },
    // range 日期change事件
    dateChange(val, item, str) {
      val = val || ["", ""];
      item.fileBytes.forEach((fileByte, index) =>
        this.$set(this[str], fileByte, val[index])
      );
    },
  }
}
</script>

<style lang="less" scoped>
.rate-box {
  padding: 12px 15px;
  border: 1px solid #EEEEEE;
  font-size: 12px;
}

.font-blod {
  font-weight: bold;
}

.divider-self {
  margin: 0 !important;
}

#logInput {
  height: 110px;
}

.tip-box {
  align-items: center;

  div {
    margin-right: 5px;
  }

  span {
    font-weight: 400;
    color: #1D1D1D;
    font-size: 12px;
  }
}

.no-input-line {
  width: 19px;
  height: 3px;
  background: #FCA21D;
  border-radius: 2px;
}

.cir-point {
  display: inline-block;
  width: 5px;
  height: 5px;
  background: #FCA21D;
  border-radius: 100%;
}

.calender-cla {
  /deep/ .el-calendar-day {
    text-align: center;
    height: 40px;
    line-height: 40px;
    padding: 0;
    margin-top: 3px;
  }

  .bor-no-input {
    border-top: 3px solid #FCA21D !important;
  }

  .day-item {
    position: relative;
    width: 85%;
    height: 100%;
    border-top: 3px solid #E6E6E6;
    border-radius: 3px;
    margin: 0 auto;

    .point-box {
      position: absolute;
      top: 24%;
      width: 100%;
      text-align: center;
    }
  }

  .is-selected {
    color: #082AFF;
    background: #ECF2FE;
    border-top: 3px solid #082AFF !important;
  }


  /deep/ .el-calendar-table tr td:first-child {
    border: none;
  }

  /deep/ .el-calendar-table td {
    border: none;
  }
}

.flex-box {
  display: flex;
  // justify-content: space-between;
}

.ma-top {
  margin-top: 20px;
}

.left-dis-box {
  width: 124px;
  // height: 70px;
  padding: 5px 0;
  background: #FBFBFB;
  border-radius: 4px;
  color: #989898;
  font-size: 14px;

  span {
    font-weight: 600;
    color: #EB2727;
    font-size: 20px;
  }
}
</style>

<style lang="scss" scoped>
@import "@/styles/base.scss";

.header-btn {
  @include headerBtn;
}

.wrap {
  @include titleWrap;
}
</style>